<template>
  <div class="editGroup">
    <div class="field-wrap">
      <div class="field-tit">群组名称:</div>
      <div class="field-bd">
        <el-input v-model="groupName" style="width:50%"></el-input>
        <el-button type="primary" @click="handleSaveTit" :loading="isSaving">保存</el-button>
      </div>
    </div>
    <div class="field-wrap">
      <div class="field-tit">群组类型:</div>
      <div class="field-bd">
        {{groupDetail.groupType===1?'动态群组':'静态群组'}}
      </div>
    </div>
    <div class="field-wrap">
      <div class="field-tit">群组成员:</div>
      <div class="field-bd">
        <el-button type="text" @click="showGroupCus">共{{groupDetail.num}}个成员</el-button>
        <el-button type="text" v-if="groupDetail.groupType===2" @click="addGroupCus">添加成员</el-button>
        <el-button type="text" v-else-if="groupDetail.groupType===1" @click="handleEditClick">编辑条件</el-button>
      </div>
    </div>
    <div class="field-wrap">
      <div class="field-tit">建立时间:</div>
      <div class="field-bd">
        {{dateFormat(groupDetail.createTime)}}
      </div>
    </div>
    <!-- 编辑动态群组条件弹层 -->
    <el-dialog title="编辑条件" :visible.sync="visible" custom-class="dialog-condition">
      <g-filter ref="filters" :conditionsGroup="conditions"></g-filter>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false;">取 消</el-button>
        <el-button type="primary" @click="handleSaveCondition" :loading="isSaving">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑条件" :visible.sync="intVisible">
      <div class="intention-condition">
        <p>当前的标签名：<span>{{ labelName }}</span></p>
        <p class="din">当前搜索关键字：</p>
        <el-input v-model="searchKey" :placeholder="searchKey" class="m-search" disabled></el-input>
        <h3>请选择更改的条件：</h3>
        <el-form>
          <el-form-item label="标签分类">
            <el-col :span="18">
              <tag-select ref="tagSelect" :tagClass="tagClass" @change="handleSelect"></tag-select>
            </el-col>
            <el-col :span="18" class="m-select" v-if="selectLabelV">
              <p>标签名</p>
              <el-select v-model="selectLabelModel" placeholder="请选择标签" @change="handleSelectLabel">
                <el-option v-for="item in selectLabelOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input v-model="searchKeyChange" placeholder="请输入搜索关键字" @change="handleKeyChange" class="m-searchkey"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="intVisible = false;">取 消</el-button>
        <el-button type="primary" @click="handleSaveIntCondition" :loading="isSaving">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  import gFilter from '@/components/common/cusManage/filter'
  import tagSelect from '@/components/common/cusManage/tagSelect'
  export default {
    components: {gFilter, tagSelect},
    data () {
      return {
        groupName: '',
        visible: false,
        intVisible: false,
        isSaving: false,
        selectLabelOption: [],
        selectLabelModel: '',
        selectLabelV: false,
        labelId: 0,
        labelName: '',
        selCondition: '',
        searchKey: '',
        searchKeyChange: ''
      }
    },
    mounted () {
      this.initPageData()
    },
    computed: {
      ...mapState({
        groupDetail: state => state.cusManage.groupDetail,
        tagClass: state => state.cusManage.tagClass,
        groupId: state => state.userInfo.groupId
      }),
      conditions () {
        let conditionStr = this.groupDetail.condition
        if (conditionStr) {
          return JSON.parse(conditionStr)
        }
      }
    },
    methods: {
      ...mapActions(['getGroupDetail', 'editDynamicGroup', 'editGroupName', 'getGroupNum', 'searchTags', 'getChildTagClass', 'createDynamicGroup3']),
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD hh:mm:ss')
      },
      // 初始化页面数据
      initPageData () {
        let id = this.$route.params.gid
        this.getGroupNum(id)
        this.getGroupDetail(id)
          .then(() => {
            this.groupName = this.groupDetail.name
          })
        this.getPageData(this.groupId)
      },
      getPageData (gid) {
        this.searchTags({gid})
        this.getChildTagClass({gid: gid})
      },
      // 保存标题
      async handleSaveTit () {
        this.isSaving = true
        await this.editGroupName({
          groupId: this.$route.params.gid,
          groupName: this.groupName
        }).then((res) => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.isSaving = false
          } else {
            this.$message({
              type: 'info',
              message: res.data.msgZ
            })
            this.isSaving = false
          }
        })
      },
      // 跳转至会员列表页面
      showGroupCus () {
        if (this.groupDetail.customerType === 1) { // 如果为会员
          this.$router.push({
            name: 'Customers',
            params: {
              initData: {
                groupId: this.groupDetail.id
              }
            }
          })
        } else {
          this.$router.push({ // 如果为意向客户
            name: 'Intention',
            params: {
              gid: this.groupDetail.id
            }
          })
        }
      },
      addGroupCus () {
        if (this.groupDetail.customerType === 1) { // 如果为会员
          this.$router.push({
            name: 'Customers',
            params: {
              initData: {
                ifNewStatic: false,
                staticGroup2: this.groupDetail.id
              }
            }
          })
        } else { // 如果为意向客户
          this.$router.push({
            name: 'Intention',
            params: {
              staticGroup2: this.groupDetail.id
            }
          })
        }
      },
      // 保存条件
      async handleSaveCondition () {
        let groupCondition = this.$refs.filters.conditionsGroup
        let groupId = this.$route.params.gid
        this.isSaving = true
        await this.editDynamicGroup({groupCondition, groupId: +groupId})
        this.isSaving = false
        this.visible = false
        this.initPageData()
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      },
      // 点击编辑条件
      handleEditClick () {
        if (this.groupDetail.customerType === 1) { // 会员
          this.visible = true
        } else { // 意向客户
          // TODO
          this.intVisible = true
          this.labelName = JSON.parse(this.groupDetail.condition).labelName
          let searchKey = JSON.parse(this.groupDetail.condition).key
          if (searchKey) {
            this.searchKey = searchKey
          } else {
            this.searchKey = '暂无搜索关键字'
          }
          // console.log(this.searchTags({labelId}))
        }
      },
      handleKeyChange (value) {
        this.searchKeyChange = value
      },
      // 保存意向客户条件
      handleSaveIntCondition () {
        this.isSaving = true
        let queryPara = {
          labelId: this.labelId,
          key: this.searchKeyChange
        }
        let gId = this.groupDetail.id
        this.createDynamicGroup3({ groupId: gId, queryPara: queryPara }).then((res) => {
          if (res.data.code === 1) {
            this.initPageData()
            this.isSaving = false
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.intVisible = false
          } else {
            this.$message({
              type: 'info',
              message: res.data.msgZ
            })
          }
        })
      },
       // 选择标签分类
      handleSelect (pid, index) {
        this.selectLabelOption = []
        this.selectLabelModel = ''
        function TagObj (id, name) {
          this.id = id
          this.name = name
        }
        if (pid) {
          this.selCondition = pid
          this.getChildTagClass({index: index, pid: pid, gid: this.groupId}).then((res) => {
            // console.log(res.data.data.length)
            this.searchTags({ pid: pid }).then((res) => {
              /* console.log(res.data.data.list) */
              if (res.data.data.list === undefined || res.data.data.list.length === 0) {
                this.selectLabelV = false
              } else {
                this.selectLabelV = true
              }
              res.data.data.list.map(item => {
                let tagOption = new TagObj(item.id, item.name)
                this.selectLabelOption.push(tagOption)
              })
            })
          })
        }
      },
      handleSelectLabel (labelId) {
        this.tbLoading = true
        this.labelId = labelId
      }
    }
  }
</script>
<style lang="scss">
.editGroup {
  .field-wrap {
    margin-bottom: 15px;
  }
  .field-tit {
    float: left;
    width: 80px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    text-align: right;
  }
  .field-bd {
    margin-left: 95px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
  }
  .dialog-condition {
    width: 70%;
  }
  .m-select{
    p{
      float: left;
      margin-right: 26px;
      color: #333;
    }
    margin: 8px 0 0 0;
  }
  .el-select{margin-right: 8px;}
  .el-form-item{
    margin-bottom: 10px;
  }
  .intention-condition{
    p{
      span{
        color: #ff0000;
      }
    }
    .din{display: inline;}
    .m-search{
      margin: 8px 0;
      width: 18.5%;
    }
    .m-searchkey{
      width: 23.6%;
      margin-left: 14px;
    }
    h3{
      font-size: 15px;
      padding: 15px 0 10px;
    }
  }
}
</style>
